Angular Material এর MatDialog এবং MatMenu কম্পোনেন্টের মাধ্যমে আপনি সহজেই overlay তৈরি করতে পারেন। ওভারলে সাধারণত মোডাল উইন্ডো, পপআপ বা ডায়লগ বক্স তৈরি করতে ব্যবহৃত হয়। Angular Material এর Overlay কম্পোনেন্ট আরও উন্নত কাস্টমাইজেশন এবং ফিচার সমর্থন করে, যেমন পজিশনিং, এনিমেশন, এবং ক্লোজিং ফাংশন।

এখানে MatDialog ব্যবহার করে ওভারলে তৈরি এবং কাস্টমাইজ করার পদ্ধতি ব্যাখ্যা করা হলো।

MatDialog: ডায়লগ ওভারলে তৈরি এবং কাস্টমাইজ করা

MatDialog কম্পোনেন্টটি একটি পপ-আপ ডায়লগ তৈরি করতে ব্যবহৃত হয়, যা ব্যবহারকারীর ইনপুট বা তথ্য প্রদর্শনের জন্য উপযুক্ত।

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatDialogModule আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    MatDialogModule
  ]
})
export class AppModule {}

২. ডায়লগ কম্পোনেন্ট তৈরি করা

ডায়লগ তৈরি করতে আপনাকে একটি নতুন কম্পোনেন্ট তৈরি করতে হবে যা ডায়লগের কন্টেন্ট ধারণ করবে।

ng generate component dialog-content

এখন, dialog-content.component.ts ফাইলের মধ্যে আপনার ডায়লগ কনটেন্টের লজিক যোগ করুন।

import { Component } from '@angular/core';

@Component({
  selector: 'app-dialog-content',
  template: `
    <h1 mat-dialog-title>Dialog</h1>
    <div mat-dialog-content>
      <p>This is an overlay dialog content.</p>
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="closeDialog()">Close</button>
    </div>
  `
})
export class DialogContentComponent {
  constructor(public dialogRef: MatDialog) {}

  closeDialog(): void {
    this.dialogRef.close();
  }
}

এখানে:

• mat-dialog-title: ডায়লগ টাইটেল।
• mat-dialog-content: ডায়লগ কনটেন্ট।
• mat-dialog-actions: ডায়লগের অ্যাকশন বাটন যেমন ক্লোজ।

৩. ডায়লগ খুলতে মেথড তৈরি করা

আপনি যেই কম্পোনেন্টে ডায়লগ ওপেন করতে চান, সেখানে MatDialog ইনজেক্ট করুন এবং open() মেথড ব্যবহার করুন।

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogContentComponent } from './dialog-content/dialog-content.component';

@Component({
  selector: 'app-root',
  template: `
    <button mat-button (click)="openDialog()">Open Dialog</button>
  `
})
export class AppComponent {

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    this.dialog.open(DialogContentComponent, {
      width: '300px',
      data: { message: 'This is a custom message' }
    });
  }
}

এখানে:

• open(): এটি ডায়লগ ওপেন করার মেথড।
• width: ডায়লগের প্রস্থ নির্ধারণ করা।
• data: ডায়লগে তথ্য পাঠানো (যদি প্রয়োজন হয়)।

৪. ডায়লগে কাস্টম স্টাইল এবং এনিমেশন

আপনি ডায়লগের জন্য কাস্টম স্টাইল এবং এনিমেশন যোগ করতে পারেন। যেমন, CSS ব্যবহার করে ডায়লগের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা।

::ng-deep .mat-dialog-container {
  background-color: #f1f1f1;
  border-radius: 8px;
  padding: 20px;
}

এটি ডায়লগের পটভূমি রঙ এবং স্টাইল কাস্টমাইজ করবে।

Overlay কাস্টমাইজেশন

Angular Material এর Overlay কম্পোনেন্ট আপনাকে আরও উন্নত কাস্টমাইজেশন এবং কন্ট্রোল দেয়, যেমন কাস্টম পজিশনিং, এনিমেশন এবং ক্লোজিং ট্রিগার। আপনি MatDialog এর পরিবর্তে Overlay কম্পোনেন্ট ব্যবহার করতে পারেন, যা এক্সট্রা কন্ট্রোল অফার করে।

১. OverlayService ব্যবহার করে কাস্টম Overlay তৈরি

প্রথমে, OverlayModule ইমপোর্ট করতে হবে।

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [
    OverlayModule
  ]
})
export class AppModule {}

২. OverlayService দিয়ে কাস্টম Overlay তৈরি

এখন, আপনি OverlayService ব্যবহার করে একটি কাস্টম overlay তৈরি করতে পারেন।

import { Component } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';

@Component({
  selector: 'app-root',
  template: `
    <button mat-button (click)="openOverlay()">Open Overlay</button>
  `
})
export class AppComponent {

  constructor(private overlay: Overlay) {}

  openOverlay(): void {
    const overlayRef = this.overlay.create();
    const portal = new ComponentPortal(OverlayContentComponent);
    overlayRef.attach(portal);
  }
}

@Component({
  selector: 'app-overlay-content',
  template: `<p>This is a custom overlay content</p>`
})
export class OverlayContentComponent {}

এখানে:

• Overlay.create(): কাস্টম overlay তৈরি করে।
• ComponentPortal: এটি একটি Angular Component কে overlay-তে স্থানান্তর করে।

Angular Material Overlay এবং MatDialog কম্পোনেন্টগুলি আপনাকে অত্যন্ত কাস্টমাইজেবল এবং ব্যবহারকারী-বান্ধব পপআপ বা ডায়লগ উইন্ডো তৈরি করতে সাহায্য করে। MatDialog সরাসরি পপআপ ডায়লগ তৈরি করতে ব্যবহৃত হয়, যখন Overlay কম্পোনেন্ট আরও উন্নত কাস্টমাইজেশন এবং নিয়ন্ত্রণ প্রদান করে। আপনি ডায়লগ এবং overlay এর মাধ্যমে সহজে ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারেন যা অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি করে তোলে।